<template>
  <div class="container">
    <el-row>
      <el-form ref="searchform" :model="form" size="small">
        <el-col :span="3">
          <el-form-item prop="city_id">
            <el-cascader
              style="width: 95%"
              ref="cascader"
              filterable
              v-model="form.city_id"
              :options="cityoptions"
              :props="{
                expandTrigger: 'hover',
                checkStrictly: true,
                emitPath: false,
              }"
              clearable
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="website">
            <el-select
              v-model="form.website"
              placeholder="请选择是否有网址"
              style="width: 95%"
              clearable
            >
              <el-option
                :label="item.lable"
                :value="item.id"
                v-for="(item, index) in statusOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="tel">
            <el-select
              v-model="form.tel"
              placeholder="请选择是否有电话"
              style="width: 95%"
              clearable
            >
              <el-option
                :label="item.lable"
                :value="item.id"
                v-for="(item, index) in statusOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="isUpdate">
            <el-select
              v-model="form.isUpdate"
              placeholder="请选择是否有更新"
              style="width: 95%"
              clearable
            >
              <el-option
                :label="item.lable"
                :value="item.id"
                v-for="(item, index) in updataOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="update_user">
            <el-select
              v-model="form.update_user"
              placeholder="请选择更新人"
              style="width: 95%"
              clearable
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, index) in updateUserOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="keyWord">
            <el-input
              placeholder="企业名称/法人代表/联系电话/网址/联系地址"
              clearable
              v-model="form.keyWord"
              style="width: 95%"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <div class="rightbtn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchlist"
            class="marginL"
            >查询
          </el-button>
          <el-button icon="el-icon-refresh-left" size="small" @click="resetform"
            >重置</el-button
          >
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="width: 100%" size="small">
        <el-table-column
          prop="name"
          label="企业名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="school_name"
          label="驾校名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="price"
          label="班型价格"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="city_id"
          label="所在城市"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="legal_man"
          label="法人代表"
          show-overflow-tooltip
        ></el-table-column>
          <el-table-column prop="contacts" label="联系人" width="200px">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              v-if="scope.row.contacts.length > 0"
            >
              <div slot="content">
                　<span v-for="i in scope.row.contacts" :key="i.id"
                  ><span
                    >{{ i.name }}<span>{{ i.tel }}</span></span
                  >
                  <br
                /></span>
              </div>
              <span
              style="cursor:pointer;color:#1bbc9b"
              @click="addContacts(scope.row)"
                >{{ scope.row.contacts[0].name }}
                </span
              >
              
            </el-tooltip>
            <span v-else style="cursor:pointer;color:#1bbc9b"  @click="addContacts(scope.row)">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="网址" show-overflow-tooltip>
          <template slot-scope="scope">
            <a
              class="a-style"
              style="color: #1bbc9b"
              v-if="scope.row.website != '-'"
              @click="toRescue(scope.row.website)"
              >{{ scope.row.website }}</a
            >
            <span v-else>{{ scope.row.website }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addr_new" label="联系地址" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.addr_new != '-'">{{
              scope.row.addr_new
            }}</span>
            <span v-else>{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="setup_date"
          label="成立日期"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="update_user"
          label="操作人"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column prop="date" label="操作" width="160px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="followBtn(scope.row)"
              v-if="checkPermission(['schoolResourcesFollowRecord'])"
              >跟进</el-button
            >
            <el-button
              type="text"
              @click="editItem(scope.row)"
              v-if="checkPermission(['schoolResourcesUpdate'])"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      :cityoptions="cityoptions"
      :areaoptions="areaoptions"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
     <!-- 弹框 -->
    <contactsdialog
      :isshowDialog="CisshowDialog"
      :dialogTitle="CdialogTitle"
      @confirm="Cconfirm"
      @closedialog="Cclosedialog"
      :dialogdata="Cdialogdata"
    ></contactsdialog>
    <follow
      :isshowDialog="followshow"
      :dialogTitle="followTitle"
      @confirm="followconfirm"
      @closedialog="followclose"
      :dialogdata="followData"
    ></follow>
  </div>
</template>

<script type="text/javascript">
import checkPermission from "@/utils/permission"; // 权限判断函数
import { schoolResources, schoolResourcesRead } from "@/api/schoolResources";
import subdialog from "./components/dialog";
import follow from "../components/follow";
import contactsdialog from "../components/dialog";
import topSearch from "@/components/topSearch";
import { commonGetCity, userOption } from "@/api/examplace";
export default {
  data() {
    return {
      isshowDialog: false,

      dialogTitle: "新增",
      followshow: false,
      followTitle: "跟进",
      CisshowDialog:false,
      CdialogTitle:'编辑联系人',
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        website: "",
        city_id: 2278,
        keyWord: "",
        update_user: "",
        isUpdate: "",
        tel: "",
      },
      tableData: [],
      category: [],
      areaoptions: [],
      cityoptions: [],
      updateUserOptions: [],
      pagination: {},
      followData: {},
      Cdialogdata: {},
      dialogdata: null,
      statusOptions: [
        { lable: "是", id: "1" },
        { lable: "否", id: "2" },
      ],
      updataOptions: [
        { lable: "是", id: "1" },
        { lable: "否", id: "0" },
      ],
    };
  },
  components: {
    subdialog,
    topSearch,
    follow,
    contactsdialog
  },
  created() {
    this.getData();
    this.getcommonGetCity();
    this.getareaoptions();
    this.getuserOption();
  },
  methods: {
    checkPermission,
    searchlist() {
      (this.page = 1), this.getData();
    },
    resetform() {
      this.$refs["searchform"].resetFields();
      this.getData();
    },
    addContacts(val){
      this.CisshowDialog=true;
       let params = { objectId: val.id, objectType: 1 ,contacts:val.contacts};
      this.Cdialogdata=params
    },
    Cconfirm(){
       this.CisshowDialog=false;
          this.getData();
    },
    Cclosedialog(){
 this.CisshowDialog=false;
    },
    //跟进
    followBtn(val) {
      this.followshow = true;
      let params = { objectId: val.id, objectType: 1 };
      this.followData = params;
    },
    followconfirm() {
      this.followshow = false;
    },
    followclose() {
      this.followshow = false;
    },
    toRescue(url) {
      window.open(url, "_blank");
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //详情
    async getquestionRead(id) {
      let data = await schoolResourcesRead({ id: id });
      this.dialogdata = data.data;
    },
    //城市下拉
    async getcommonGetCity() {
      let data = await commonGetCity();
      this.cityoptions = data.data;
    },
    //更新人下拉
    async getuserOption() {
      let data = await userOption();
      this.updateUserOptions = data.data;
    },
    //地区
    async getareaoptions() {
      let data = await commonGetCity({ level: 3 });
      this.areaoptions = data.data;
    },
    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //编辑
    editItem(val) {
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
      this.getquestionRead(val.id);
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      if (this.form.city_id) {
        params.city_id = this.form.city_id;
      }
      if (this.form.website) {
        params.website = this.form.website;
      }
      if (this.form.tel) {
        params.tel = this.form.tel;
      }
      if (this.form.isUpdate) {
        params.isUpdate = this.form.isUpdate;
      }
      if (this.form.update_user) {
        params.update_user = this.form.update_user;
      }
      let data = await schoolResources(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    white-space: nowrap;
}
  .tips {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marginLS {
    margin-left: 10px;
  }
}
</style>
